<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">	
	<head th:replace="~{commons/public::common-public}">   <!-- 引入了所有的公用css和js等 -->
	<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<title>控制台首页</title>
</head>
	<body>
		<div id="wrapper">
			<header th:replace="~{commons/header::common-header(activeUrl='main')}"></header>   <!-- 引入了左边的导航(类似left)和上面的头(类似top)  -->
	
			<div id="page-wrapper">
					<div class="container-fluid">
							<!-- 上面的一条 -->
							<div class="row">
								<div class="col-lg-12">
									<h1 class="page-header">
										仪表盘 <small>统计总览</small>
									</h1>
									<ol class="breadcrumb">
										<li class="active"><i class="fa fa-dashboard"></i> 仪表盘
										</li>
									</ol>
								</div>
							</div>
							
							<!-- 一条文字 -->
							<div class="row">
								<div class="col-lg-12">
									<div class="alert alert-info alert-dismissable">
										<button type="button" class="close" data-dismiss="alert"
											aria-hidden="true">&times;</button>
										<i class="fa fa-info-circle"></i> <strong>一些文字什么的</strong>
										前往 <a
											href="http://startbootstrap.com/template-overviews/sb-admin-2"
											class="alert-link">startbootstrap.com</a> 了解更多内容
									</div>
								</div>
							</div>
							
							<!-- 四个方框 -->
							<div class="row">
								<div class="col-lg-3 col-md-6">
									<div class="panel panel-primary">
										<div class="panel-heading">
											<div class="row">
												<div class="col-xs-3">
													<i class="fa fa-comments fa-5x"></i>
												</div>
												<div class="col-xs-9 text-right">
													<div class="huge">26</div>
													<div>提示文字</div>
												</div>
											</div>
										</div>
										<a href="#">
											<div class="panel-footer">
												<span class="pull-left">查看详细</span> 
												<span	class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
												<div class="clearfix"></div>
											</div>
										</a>
									</div>
								</div>
									
								<div class="col-lg-3 col-md-6">
									<div class="panel panel-green">
										<div class="panel-heading">
											<div class="row">
												<div class="col-xs-3">
													<i class="fa fa-tasks fa-5x"></i>
												</div>
												<div class="col-xs-9 text-right">
													<div class="huge">12</div>
													<div>New Tasks!</div>
												</div>
											</div>
										</div>
										<a href="#">
											<div class="panel-footer">
												<span class="pull-left">View Details</span> <span
													class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
												<div class="clearfix"></div>
											</div>
										</a>
									</div>
								</div>
			
								<div class="col-lg-3 col-md-6">
									<div class="panel panel-yellow">
										<div class="panel-heading">
											<div class="row">
												<div class="col-xs-3">
													<i class="fa fa-shopping-cart fa-5x"></i>
												</div>
												<div class="col-xs-9 text-right">
													<div class="huge">124</div>
													<div>New Orders!</div>
												</div>
											</div>
										</div>
										<a href="#">
											<div class="panel-footer">
												<span class="pull-left">View Details</span> <span
													class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
												<div class="clearfix"></div>
											</div>
										</a>
									</div>
								</div>
								
								<div class="col-lg-3 col-md-6">
									<div class="panel panel-red">
										<div class="panel-heading">
											<div class="row">
												<div class="col-xs-3">
													<i class="fa fa-support fa-5x"></i>
												</div>
												<div class="col-xs-9 text-right">
													<div class="huge">13</div>
													<div>Support Tickets!</div>
												</div>
											</div>
										</div>
										<a href="#">
											<div class="panel-footer">
												<span class="pull-left">View Details</span> <span
													class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
												<div class="clearfix"></div>
											</div>
										</a>
									</div>
								</div>
							</div>
			
							<!-- 长条图表   实际的数据在 morris-data.js中 -->
							<div class="row">
								<div class="col-lg-12">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h3 class="panel-title">
												<i class="fa fa-bar-chart-o fa-fw"></i> 面积图 (Area Chart)
											</h3>
										</div>
										<div class="panel-body">
											<div id="morris-area-chart"></div>
										</div>
									</div>
								</div>
							</div>
							
							<!-- 下方的三个图表 -->
							<div class="row">
								<!-- 圆的图表 -->
								<div class="col-lg-4">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h3 class="panel-title">
												<i class="fa fa-long-arrow-right fa-fw"></i> 圆环图 (Donut Chart)
											</h3>
										</div>
										<div class="panel-body">
											<div id="morris-donut-chart"></div>
											<div class="text-right">
												<a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
									</div>
								</div>
								
								<!-- 方的图表 -->
								<div class="col-lg-4">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h3 class="panel-title">
												<i class="fa fa-clock-o fa-fw"></i>任务图 (Tasks Panel) 
											</h3>
										</div>
										<div class="panel-body">
											<div class="list-group">
												<a href="#" class="list-group-item"> 
													<span class="badge">just now</span> <i class="fa fa-fw fa-calendar"></i> Calendar updated
												</a> 
												<a href="#" class="list-group-item"> 
													<span class="badge">4 minutes ago</span> <i class="fa fa-fw fa-comment"></i> Commented on a post
												</a> 
												<a href="#" class="list-group-item"> 
													<span class="badge">23 minutes ago</span> <i class="fa fa-fw fa-truck"></i> Order 392 shipped
												</a> 
												<a href="#" class="list-group-item"> 
													<span class="badge">46 minutes ago</span> <i class="fa fa-fw fa-money"></i> Invoice 653 has been
												</a> 
												<a href="#" class="list-group-item"> 
													<span class="badge">1 hour ago</span> <i class="fa fa-fw fa-user"></i> A new user has been added
												</a>
											</div>
											<div class="text-right">
												<a href="#">查看所有<i
													class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
									</div>
								</div>
								
								<!-- 表格图表 -->
								<div class="col-lg-4">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h3 class="panel-title">
												<i class="fa fa-money fa-fw"></i> 事务处理 (Transactions Panel)
											</h3>
										</div>
										<div class="panel-body">
											<div class="table-responsive">
												<table class="table table-bordered table-hover table-striped">
													<thead>
														<tr>
															<th>Order #</th>
															<th>Order Date</th>
															<th>Order Time</th>
															<th>Amount (USD)</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>3322</td>
															<td>10/21/2013</td>
															<td>2:49 PM</td>
															<td>$8345.23</td>
														</tr>
														<tr>
															<td>3321</td>
															<td>10/21/2013</td>
															<td>2:23 PM</td>
															<td>$245.12</td>
														</tr>
														<tr>
															<td>3320</td>
															<td>10/21/2013</td>
															<td>2:15 PM</td>
															<td>$5663.54</td>
														</tr>
														<tr>
															<td>3319</td>
															<td>10/21/2013</td>
															<td>2:13 PM</td>
															<td>$943.45</td>
														</tr>
													</tbody>
												</table>
											</div>
											<div class="text-right">
												<a href="#">查看所有事tl <i
													class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
									</div>
								</div>
									
							</div>		
					</div>
			</div>
		</div>
	</body>
</html>	